<?php
/*
 * Team 1 Project - Palo Alto Bicycle Club
 * Author: Tom Ajayebi
 * Class: COIN 71
 * Filename: add_ride.php (was add_ride.html and index.php/html)
 * Date Created: 2/24/2009
 * Functionality: Post a groutp ride.
 * Requires: ContentLoader.js
 * Modification History:
 *		10 Mar 09 - Vern McGeorge - Renamed to match feature, modified includes to match directory structure and started integration testing.
 *    11 Mar 09 - Vern McGeorge - Merged in main page layout, continued testing, and checked into SVN (maybe)
 *		13 Mar 09 - Vern McGeorge - Converted to a "partial" which is loaded into the contentArea in the right column and got it damn near working.
 * 		14 Mar 09 - Archana Nagarkatti - Added new input fields for ride category, hilliness and mileage; removed photo URL field
*/
?>
    <div id="post_ride">
		<h3>Post a New Group Ride</h3>
		<div class="form-row"></div>
		<div class="form-dom" id="header2">Fields can NOT be "empty"</div>

		<div class="form-row">Title:</div>
		<div class="form-dom"  id="title">
			<input name="title" id="title" type="text" size="40" maxlength="80" tabindex="1" />
		</div>

		<div class="form-row">City:</div>
		<div class="form-dom" class="form-row" id="city" >
			<input name="city" id="city" type="text" size="30" maxlength="30" tabindex="2" />
		</div>

		<div class="form-row">Start Address:</div>
		<div class="form-dom" id="start_point">
			<input name="start_point" id="start_point" type="text" size="40" maxlength="80" tabindex="3" />
			<input name="map_toggle" id="map_toggle" type="button" value="Test Mapability" onclick="getTestMap()"/>
		</div>
				
		<div class="form-row"></div>
		<div class="form-dom" id="map_test">
		</div>

		<div class="form-row">Date:</div>
		<div class="form-dom" id="date" >
			<input name="date" id="popupDatepicker" type="text" size="10" maxlength="10" tabindex="4" />
		</div>

		<div class="form-row">Time:</div>
		<div class="form-dom" id="time" >
			<input name="time" id="timepickr" type="text" size="10" maxlength="10" tabindex="5" />
		</div>

		<div class="form-row">Leader:</div>
		<div class="form-dom" id="leader">
			<input name="leader" id="leader" type="text" size="30" maxlength="30" tabindex="6"/>
		</div>

		<div class="form-row">Phone:</div>
		<div class="form-dom" id="leader_phone">
			(<input name="phone_0" id="phone_0" type="text" size="3" maxlength="3" tabindex="7" />)
			 <input name="phone_1" id="phone_1" type="text" size="3" maxlength="3" tabindex="8" />
			- <input name="phone_2" id="phone_2" type="text" size="4" maxlength="4" tabindex="9" />
		</div>

		<div class="form-row">Ride Category:</div><div class="form-dom" id="category" >
		<select id="category" size="1" tabindex="10">
			<option value="A" selected="selected">A (Slowest)</option>
			<option value="B">B (Medium Slow)</option>
			<option value="C">C (Slow)</option>
			<option value="D">D (Fast)</option>
			<option value="E">E (Medium Fast)</option>
			<option value="F">F (Fastest)</option>
		</select></div>

		<div class="form-row">Hilliness:</div><div class="form-dom" id="hilliness" >
		<select id="hilliness" size="1" tabindex="11">
			<option value="1" selected="selected">1 (Most Flat)</option>
			<option value="2">2 (Flat)</option>
			<option value="3">3 (Hilly)</option>
			<option value="4">4 (Most Hilly)</option>
		</select></div>

		<div class="form-row">Mileage:</div>
		<div class="form-dom" id="mileage" >
			<input name="mileage_mi" id="mileage" type="text" size="5" maxlength="4" tabindex="12" />
		</div>

		<div class="form-row">Description:</div>
		<div class="form-dom" id="description">
			<textarea id="description" name="description" rows="6" cols="40" tabindex="13"></textarea>
			Max: 1000 char.
		</div>

		<div>
			<div class="form-row" id="insertbutton" >
				<button type="button" id="InsertIntoDB" name="InsertIntoDB" value="InsertIntoDB" onclick="sendInsertQuery()">
					Submit
				</button>
			</div>

			<div class="form-clear" id="clearbutton">
				<button type="button" id="clearbutton" name="clearbutton" value="clearbutton" onclick="clearFields()">
					Clear All Fields
				</button>
			</div>
        </div>
        <br />
    </div>